<template>
  <div id="index">
    <div class="btn">
      <el-button
        type="primary"
        icon="el-icon-monitor"
        plain
        size="mini"
        @click="clickFun"
        >全屏显示</el-button
      >
    </div>

    <div class="cockpit" id="content">
      <!-- <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="container" style="width: 100%"> -->
      <!-- 顶部标题 -->
      <div class="title_top">
        <!-- 左边时间 -->
        <div class="time" style="flex: 0 1 30%">
          <p
            class="now_time"
            style="color: #fff"
            v-html="formateTimeStamp(date)"
          ></p>
        </div>
        <!-- 左边装饰 -->
        <div style="flex: 1">
          <dv-decoration-8 :color="['#568aea', '#568aea']" class="linebox" />
        </div>
        <!-- 中间标题 -->
        <div style="flex: 1; border-bottom: 3px #568aea solid">
          <h1>Tesla车间</h1>
        </div>
        <!-- 右边装饰 -->
        <div style="flex: 1">
          <dv-decoration-8
            :color="['#568aea', '#568aea']"
            :reverse="true"
            class="linebox"
          />
        </div>
        <!-- 占右边空位 -->
        <div style="flex: 0 1 25%; text-align: right; margin-top: 1%"></div>
      </div>
      <!-- 第一行 订单 -->
      <div class="border-box-content" style="">
        <dv-border-box-12 ref="orderList">
          <span>在产/待产订单信息</span>
          <div id="order">
            <dv-scroll-board
              :config="config2"
              style="width: 100%; height: 90px"
            />
            <dv-scroll-board
              :config="config1"
              style="width: 100%; height: 140px"
            />
          </div>
        </dv-border-box-12>
      </div>
      <!-- 第二行 -->
      <div class="content1" >
        <div class="border-box-content">
          <dv-border-box-10 style="width: 99%">
            <span>质量统计</span>
            <span style="color: white; font-size: 18px; margin-left: 25%">
              今日总合格率：{{ defectiveRes.rate }}&nbsp; 问题总数：{{
                defectiveRes.defectiveCount
              }}
            </span>

            <div class="zl">
              <dv-border-box-6
                ref="boxmini"
                v-for="(item, index) in defectiveList"
                :key="index"
                class="box"
              >
                <p style="text-align: center; margin-top: 4%">
                  {{ item.name }}
                </p>
                <div class="boxmini">
                  <div class="num">
                    <p>数量</p>
                    <p>{{ item.defectiveCount }}</p>
                  </div>
                  <div class="bi">
                    <p>问题总数占比</p>
                    <p>{{ item.rate }}</p>
                  </div>
                </div>
              </dv-border-box-6>
            </div>
          </dv-border-box-10>
        </div>
        <div class="border-box-content">
          <dv-border-box-10 style="width: 99%">
            <span>蜡池温度</span>
            <div ref="Oil" style="width: 100%; height: 90%"></div>
          </dv-border-box-10>
        </div>
        <div class="border-box-content">
          <dv-border-box-10 style="width: 99%">
            <span>制冷温度</span>
            <div ref="refrigeration" style="width: 100%; height: 90%"></div>
          </dv-border-box-10>
        </div>
      </div>
      <!-- 第三行 -->
      <div class="content2">
        <div class="border-box-content">
          <dv-border-box-13 ref="box1" style="width: 99%">
            <span>能耗/产量数据图</span>
            <div ref="Energy" style="width: 99%; height: 90%"></div>
          </dv-border-box-13>
        </div>
        <div class="border-box-content">
          <dv-border-box-13 ref="box2" style="width: 99%">
            <span>能耗统计</span>
            <div class="circle-center">
              <div class="consumptionleft">
                <dv-active-ring-chart
                  ref="circle"
                  :config="config3"
                  style="width: 100%; height: 98%"
                />
              </div>
              <div class="totalenergyright">
                <div>
                  <span>本日能耗(KWH)</span>
                  <span>{{ yesterday }}</span>
                </div>
                <div>
                  <span>本月能耗(KWH)</span>
                  <span>{{ lastmonth }}</span>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
        <div class="border-box-content">
          <dv-border-box-13 ref="box3" style="width: 99%">
            <span>点检完成情况</span>
            <div ref="check" style="width: 100%; height: 90%"></div>
          </dv-border-box-13>
        </div>
      </div>
      <!-- </div>-->
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
import {
  tslLcTemp,
  tslConsumAndProNLineS,
  tslConsumPie,
} from "@/api/tesla/tsllargescreen.js";
import {
  defective,
  orderList,
  orderListing,
  energy,
  energyAll,
  waxpool,
  refrigeration,
  totaldata,
  checked,
  order,
  orderListTest,
} from "@/api/system/cockpit";
export default {
  data() {
    return {
      // 全屏显示
      isFullFlag: false,
      // 订单
      config1: {
        columnWidth: [], // 分别对应列宽
        align: "center", //文字对齐方式
        data: [],
      },
      config2: {
        header: [
          "wdr号",
          "零件号",
          "订单名称",
          "订单状态",
          "订单进度",
          "合格率",
        ], //表头数据
        columnWidth: [400, 400, 600, 300, 500, 300], // 分别对应列宽
        // columnWidth:[],
        // align: "right", //文字对齐方式
        data: [],
        rowNum: 1,
        headerHeight: 40,
        headerBGC: "#244278", //表头
        oddRowBGC: "rgba(0,0,0,0)", //奇数行
        evenRowBGC: "rgba(23,28,51,0.8)", //偶数行
      },
      // 能耗
      config3: {},
      // 昨日能耗
      yesterday: "1623",
      // 本日月能耗
      lastmonth: "4521",
      loading: false, //加载
      date: new Date().getTime(),
      // 质量问题数组
      defectiveList: [
        // {
        //   name: "蜡脏",
        //   rate: "0%",
        //   productCount: null,
        //   defectiveCount: 0,
        //   defectiveCounts: null,
        // },
        // {
        //   name: "灯芯偏",
        //   rate: "0%",
        //   productCount: null,
        //   defectiveCount: 0,
        //   defectiveCounts: null,
        // },
        // {
        //   name: "液面气泡不平整",
        //   rate: "0%",
        //   productCount: null,
        //   defectiveCount: 0,
        //   defectiveCounts: null,
        // },
        // {
        //   name: "胎膜破口",
        //   rate: "0%",
        //   productCount: null,
        //   defectiveCount: 0,
        //   defectiveCounts: null,
        // },
        // {
        //   name: "蜡杂质",
        //   rate: "0%",
        //   productCount: null,
        //   defectiveCount: 0,
        //   defectiveCounts: null,
        // },
        // {
        //   name: "其他",
        //   rate: "0%",
        //   productCount: null,
        //   defectiveCount: 0,
        //   defectiveCounts: null,
        // },
        {
          name: "蜡脏",
          rate: "2.00%",
          productCount: null,
          defectiveCount: 5,
          defectiveCounts: null,
        },
        {
          name: "灯芯偏",
          rate: "20.00%",
          productCount: null,
          defectiveCount: 15,
          defectiveCounts: null,
        },
        {
          name: "液面气泡不平整",
          rate: "5.00%",
          productCount: null,
          defectiveCount: 8,
          defectiveCounts: null,
        },
        {
          name: "胎膜破口",
          rate: "51.43%",
          productCount: null,
          defectiveCount: 89,
          defectiveCounts: null,
        },
        {
          name: "蜡杂质",
          rate: "3.50%",
          productCount: null,
          defectiveCount: 1,
          defectiveCounts: null,
        },
        {
          name: "其他",
          rate: "0.00%",
          productCount: null,
          defectiveCount: 0,
          defectiveCounts: null,
        },
      ],
      // 质量问题外层
      defectiveRes: { defectiveCount: 118, rate: "99%" },
      // 能耗产量数据
      EnergyList: [],
      // 蜡池温度数组
      oilList: [],
      // 制冷系统数组
      refrigerationList: [],
      // 点检数组
      checkList: [],
      // 订单列表
      orderList: [
       
         {
          searchValue: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          params: {},
          id: 680,
          orderId: null,
          wdr: "RMB23/M6/2295/DR199E",
          orderNo: "409374;409377",
          partNo: "C020330604",
          orderDescribe: "7.4*7.9cm蒙砂厚底斜杯灌普通石蜡1只/彩盒2只/缩包",
          color: "奶黄ML",
          weight: 105.0,
          orderNum: 41184,
          orderState: "未生产",
          startTime: null,
          endTime: null,
          productTime: null,
          yield: null,
          progress: null,
        },
      ],
      // 正在生产
      noworder:[ {
          searchValue: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          params: {},
          id: 680,
          orderId: null,
          wdr: "RMB23/M6/2295/DR199E",
          orderNo: "413529;413637",
          partNo: "C020330546",
          orderDescribe: "7.4*7.9cm蒙砂厚底斜杯灌普通石蜡1只/彩盒",
          color: "奶黄ML",
          weight: 105.0,
          orderNum: 10080,
          orderState: "正在生产",
          startTime: null,
          endTime: null,
          productTime: null,
          yield: null,
          progress: '861/10080',
        },]
    };
  },
  computed: {
    // 获取侧边栏
    ...mapGetters(["sidebar"]),
    // 计算收缩菜单的变化
    isCollapse() {
      return this.sidebar.opened;
    },
  },
  watch: {
    isCollapse() {
      setTimeout(() => {
        this.$refs.orderList.initWH();
        this.$refs.box1.initWH();
        this.$refs.box2.initWH();
        this.$refs.box3.initWH();
        this.Oil.resize();
        this.Energy.resize();
        // this.$refs.circle.initChart()
        this.$refs.boxmini.forEach((item) => {
          item.initWH();
        });
      }, 300);
    },
    // 监听能耗产量的变化，给图表赋值
    EnergyList() {
      this.Energy.setOption({
        backgroundColor: "",
        legend: {
          x: "60%",
          y: "0%",
          left: "250",
          data: ["能耗(KWH)", "产能(个)", "蜡重(KG)"],
          textStyle: {
            color: "#9faeb5",
          },
        },
        xAxis: {
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          data: this.EnergyList[3],
          axisLabel: {
            formatter: function (value) {
              var ret = ""; //拼接加\n返回的类目项
              var maxLength = 1; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) {
                //如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end);
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
            interval: 0,
            fontSize: 14,
            fontWeight: 100,
            textStyle: {
              color: "#9faeb5",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#4d4d4d",
            },
          },
        },
        yAxis: [
          {
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            splitArea: {
              show: false,
            },

            axisLabel: {
              textStyle: {
                color: "#9faeb5",
                fontSize: 16,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#4d4d4d",
              },
            },
            name: "能耗",
            nameGap: "20",
            nameTextStyle: {
              color: "#fff",
            },
          },
          {
            type: "value",
            // name: '产能',
            min: 0,
            max: 60000,
            position: "right",
            axisLabel: {
              textStyle: {
                color: "#9faeb5",
                fontSize: 16,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#4d4d4d",
              },
            },
            name: "蜡重、产能",
            nameGap: "20",
            nameTextStyle: {
              color: "#fff",
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          transitionDuration: 0,
          backgroundColor: "rgba(83,93,105,0.8)",
          borderColor: "#535b69",
          borderRadius: 8,
          borderWidth: 2,
          padding: [5, 10],
          formatter: function (params, ticket, callback) {
            var res = "";
            for (var i = 0, l = params.length; i < l; i++) {
              res +=
                "" + params[i].seriesName + " : " + params[i].value + "<br>";
            }
            return res;
          },
          axisPointer: {
            type: "line",
            lineStyle: {
              type: "dashed",
              color: "#ffff00",
            },
          },
        },
        series: [
          {
            name: "产能(个)",
            type: "bar",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00d386", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0076fc", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                barBorderRadius: 15,
              },
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#ffc72b",
                  fontSize: 10,
                },
              },
            },
            data: this.EnergyList[1],
            barWidth: 16,
          },
          {
            name: "蜡重(KG)",
            type: "bar",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#2652B4", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#5C3590", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                barBorderRadius: 15,
              },
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#ffc72b",
                  fontSize: 10,
                },
              },
            },
            data: this.EnergyList[2],
            barWidth: 16,
          },
          {
            name: "能耗(KWH)",
            type: "line",
            itemStyle: {
              /*设置折线颜色*/
              normal: {
                /* color:'#c4cddc'*/
              },
            },
            data: this.EnergyList[0],
          },
        ],
      });
    },
    // 监听蜡池温度的变化，给图表赋值
    oilList() {
      this.Oil.setOption({
        legend: {
          icon: "circle",
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 10,
          top: "5",
          right: "30",
          data: ["三号蜡池(℃)", "四号蜡池(℃)", "五号蜡池(℃)"],
          textStyle: {
            fontSize: 14,
            color: "#a0a8b9",
          },
        },
        // grid: {
        //   top: '46',
        //   left: '13%',
        //   right: '10',
        //   //bottom: '10%',
        //   containLabel: false
        // },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              interval: 0,
              fontSize: 14,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#a0a8b9",
              },
            },
            axisTick: {
              show: false,
            },
            data: this.oilList[0][1],
            offset: 10,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "℃",
            nameGap: "2",
            min: 40,
            max: 100,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#a0a8b9",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#2b3646",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          transitionDuration: 0,
          backgroundColor: "rgba(83,93,105,0.8)",
          borderColor: "#535b69",
          borderRadius: 8,
          borderWidth: 2,
          padding: [5, 10],
          formatter: function (params, ticket, callback) {
            var res = "";
            for (var i = 0, l = params.length; i < l; i++) {
              res +=
                "" + params[i].seriesName + " : " + params[i].value + "<br>";
            }
            return res;
          },
          axisPointer: {
            type: "line",
            lineStyle: {
              type: "dashed",
              color: "#ffff00",
            },
          },
        },
        series: [
          {
            name: "三号蜡池(℃)",
            type: "line",
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(223,223,223, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(223,223,223, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "#DFDFDF",
              },
            },
            data: this.oilList[0][0],
          },
          {
            name: "四号蜡池(℃)",
            type: "line",
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(229,244,19, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(229,244,19, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "#E5F413",
              },
            },
            data: this.oilList[1][0],
          },
          {
            name: "五号蜡池(℃)",
            type: "line",
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(238,150,255, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(238,150,255, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "#EE96FF",
              },
            },
            data: this.oilList[2][0],
          },
        ],
      });
    },
    refrigerationList() {
      this.refrigeration.setOption({
        legend: {
          icon: "circle",
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 10,
          top: "5",
          right: "120",
          data: ["制冷一(℃)", "制冷二(℃)", "制冷三(℃)"],
          textStyle: {
            fontSize: 14,
            color: "#a0a8b9",
          },
        },
        // grid: {
        //   top: '46',
        //   left: '13%',
        //   right: '10',
        //   //bottom: '10%',
        //   containLabel: false
        // },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              interval: 0,
              fontSize: 14,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#a0a8b9",
              },
            },
            axisTick: {
              show: false,
            },
            data: this.refrigerationList[0][1],
            offset: 10,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "℃",
            nameGap: "2",
            min: 0,
            max: 30,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#a0a8b9",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#2b3646",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          transitionDuration: 0,
          backgroundColor: "rgba(83,93,105,0.8)",
          borderColor: "#535b69",
          borderRadius: 8,
          borderWidth: 2,
          padding: [5, 10],
          formatter: function (params, ticket, callback) {
            var res = "";
            for (var i = 0, l = params.length; i < l; i++) {
              res +=
                "" + params[i].seriesName + " : " + params[i].value + "<br>";
            }
            return res;
          },
          axisPointer: {
            type: "line",
            lineStyle: {
              type: "dashed",
              color: "#ffff00",
            },
          },
        },
        series: [
          {
            name: "制冷一(℃)",
            type: "line",
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: "#AAFD2E",
              type: "solid",
              width: 2,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(28,153,185, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(28,153,185, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "#AAFD2E",
              },
            },
            data: this.refrigerationList[0][0],
          },
          {
            name: "制冷二(℃)",
            type: "line",
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: "#A18ECD",
              type: "solid",
              width: 2,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(170,253,46, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(170,253,46, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "#A18ECD",
              },
            },
            data: this.refrigerationList[1][0],
          },
          {
            name: "制冷三(℃)",
            type: "line",
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: "#FD762E",
              type: "solid",
              width: 2,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(253,118,46, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(253,118,46, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "#FD762E",
              },
            },
            data: this.refrigerationList[2][0],
          },
        ],
      });
    },
    checkList() {
      this.check.setOption({
        legend: {
          x: "60%",
          y: "0%",
          left: "400",
          data: ["已完成", "应完成(25项)"],
          textStyle: {
            color: "#9faeb5",
          },
        },
        xAxis: [
          {
            type: "category",
            data: this.checkList[1],
            legend: {
              x: "60%",
              y: "0%",
              textStyle: {
                color: "#9faeb5",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#4d4d4d",
                width: 0,
                type: "solid",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#9faeb5",
              },
            },
          },
        ],
        yAxis: {
          type: "value",
          name: "项",
          nameGap: "20",
          nameTextStyle: {
            color: "#fff",
          },
          min: 0,
          max: 35,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#4d4d4d",
              width: 0,
              type: "solid",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#9faeb5",
            },
          },
        },
        tooltip: {
          trigger: "axis",
          transitionDuration: 0,
          backgroundColor: "rgba(83,93,105,0.8)",
          borderColor: "#535b69",
          borderRadius: 8,
          borderWidth: 2,
          padding: [5, 10],
          formatter: function (params, ticket, callback) {
            var res = "";
            for (var i = 0, l = params.length; i < l; i++) {
              res +=
                "" + params[i].seriesName + " : " + params[i].value + "<br>";
            }
            return res;
          },
          axisPointer: {
            type: "line",
            lineStyle: {
              type: "dashed",
              color: "#ffff00",
            },
          },
        },
        series: [
          {
            data: this.checkList[0],
            type: "bar",
            name: "已完成",
            barWidth: 20,
            markLine: {
              lineStyle: {
                normal: {
                  color: "#CEDAE7",
                },
              },
              data: [
                {
                  yAxis: 25,
                },
              ],
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#fff",
                  },
                },
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#9B43C8", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#422772", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                barBorderRadius: 15,
              },
            },
          },
        ],
      });
    },
  },

  mounted() {
    // 获取图标dom实例
    // 能耗产量数据图
    this.Energy = echarts.init(this.$refs.Energy);
    this.Oil = echarts.init(this.$refs.Oil);
    this.refrigeration = echarts.init(this.$refs.refrigeration);
    this.check = echarts.init(this.$refs.check);
    // 监听页面尺寸变化，让图表自适应
    window.addEventListener("resize", () => {
      this.Energy.resize();
      this.Oil.resize();
      this.refrigeration.resize();
      this.check.resize();
    });
    // this.allFn();
    this.timer2 = setInterval(() => {
      this.allFn();
      //每五分更新一次页面数据
    }, 300000);
  },
  created() {
    this.allFn();
    this.loadTime();
  },

  methods: {
    // 全都方法
    allFn() {
      this.EnergyData();
      this.getEnergy();
      this.getOil();
      this.getCold();
      this.getCheck();
      this.getorderList();
    },
    // 点击按钮全屏
    clickFun() {
      this.isFullFlag = !this.isFullFlag;
      const element = document.getElementById("content"); //指定全屏区域元素
      if (this.isFullFlag) {
        // screenfull.request(element);
        element.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    },
    // 订单列表
    getorderList() {
      // orderList().then((res) => {
      //   // console.log(res);
      let orderAll1 = [];
      this.orderList.map((item) => {
        // orderAll.push([item.wdr, item.partNo, item.orderDescribe, item.orderState, item.progress, item.yield])
        orderAll1.push([
          item.wdr,
          item.partNo,
          item.orderDescribe,
          item.orderState,
          item.progress,
        ]);
      });
      // console.log(orderAll);
      this.config1 = {
        data: orderAll1,
        // columnWidth: [],
        columnWidth: [400, 400, 600, 300, 500],
        // columnWidth: [400, 400, 600, 300, 500, 300],

        // header: ['wdr号', '零件号', '订单名称','订单状态','订单进度','合格率'],
        align: "center",
        rowNum: 3,
        headerHeight: 40, //表头
        oddRowBGC: "rgba(0,0,0,0)", //奇数行
        evenRowBGC: "rgba(23,28,51,0.8)", //偶数行
        waitTime: 15000,
      };
      // });
      // orderListing().then((res) => {
      let orderAll = [];
      this.noworder.map((item) => {
        // orderAll.push([item.wdr, item.partNo, item.orderDescribe, item.orderState, item.progress, item.yield])
        orderAll.push([
          item.wdr,
          item.partNo,
          item.orderDescribe,
          item.orderState,
          item.progress,
        ]);
        // });
        this.config2 = {
          // header: ['wdr号', '零件号', '订单名称', '订单状态', '订单进度', '合格率'],
          header: ["wdr号", "零件号", "订单名称", "订单状态", "订单进度"],
          columnWidth: [400, 400, 600, 300, 500],
          // columnWidth: [400, 400, 600, 300, 500, 300],
          data: orderAll,

          // columnWidth:[],
          align: "center",
          rowNum: 1,
          headerHeight: 40,
          headerBGC: "#244278", //表头
          oddRowBGC: "rgba(0,0,0,0)", //奇数行
          evenRowBGC: "rgba(23,28,51,0.8)", //偶数行
        };
      });
    },
    // 蜡池温度
    getOil() {
      // tslLcTemp().then((res) => {
      //   // console.log(res);
      //   this.oilList = res.data;
      // });
      this.oilList = [
        [
          [60, 60, 60, 60, 61, 61, 62, 62, 63],
          [
            "16:20",
            "16:22",
            "16:24",
            "16:28",
            "16:30",
            "16:32",
            "16:34",
            "16:36",
            "16:38",
          ],
        ],
        [
          [78, 78, 78, 79, 77, 79, 80, 80, 82],
          [
             "16:20",
            "16:22",
            "16:24",
            "16:28",
            "16:30",
            "16:32",
            "16:34",
            "16:36",
            "16:38",
          ],
        ],
        [
          [80, 80, 80, 80, 80, 80, 80, 80, 80],
          [
            "16:20",
            "16:22",
            "16:24",
            "16:28",
            "16:30",
            "16:32",
            "16:34",
            "16:36",
            "16:38",
          ],
        ],
      ];
    },
    // 制冷系统
    getCold() {
      this.refrigerationList = [
        [
          [9, 13, 10, 12, 10, 14, 16, 16, 10],
          [
             "16:20",
            "16:22",
            "16:24",
            "16:28",
            "16:30",
            "16:32",
            "16:34",
            "16:36",
            "16:38",
          ],
        ],
        [
          [18, 10, 13, 16, 10, 9, 13, 14, 16],
          [
             "16:20",
            "16:22",
            "16:24",
            "16:28",
            "16:30",
            "16:32",
            "16:34",
            "16:36",
            "16:38",
          ],
        ],
        [
          [15, 16, 15, 16, 10, 16, 16, 16, 15],
          [
             "16:20",
            "16:22",
            "16:24",
            "16:28",
            "16:30",
            "16:32",
            "16:34",
            "16:36",
            "16:38",
          ],
        ],
      ];
      // tslLcTemp().then(res=>{
      //   // console.log(res);
      //   this.oilList=res.data
      // })
    },

    // 能耗与产量数据图
    EnergyData() {
      tslConsumAndProNLineS().then((res) => {
        // console.log(res);
        this.EnergyList = res.data;
      });
    },
    //能耗统计
    getEnergy() {
      // 能耗
      // tslConsumPie().then((res) => {
        // console.log(res);
        this.config3 = {
          data: [
            {value: 108, name: "导热油化蜡"},
            {value: 50, name: "保温车"},
            {value: 22, name: "制冷"}],
          radius: "80%",
          activeRadius: "85%",
          digitalFlopStyle: {
            fontSize: 20,
            fill: "#fff",
          },
        };
      // });
    },
    // 点检完成
    getCheck() {
      this.checkList = [
        ["3", "5", "3", "27", "6", "3", "1", "27", "32"],
        [
          "12-26",
          "12-27",
          "12-28",
          "12-29",
          "12-30",
          "12-31",
          "01-01",
          "01-02",
          "01-03",
        ],
      ];
    },

    // 时间
    loadTime() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        this.date += 1000;
        // console.log(1);
      }, 1000);
    },
    // 转换时间戳
    formateTimeStamp(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var second =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      var week = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];
      return (
        '<span style="font-size: 55px; float:left; text-shadow: 0px 2px 7px rgba(51, 51, 51, 0.6);">' +
        hour +
        ":" +
        minute +
        ":" +
        second +
        "</span>" +
        '<span style="font-size: 16px; display:inline-block; margin-top:8px; padding-left:10px">' +
        year +
        "年" +
        month +
        "月" +
        day +
        "日" +
        "</span><br />" +
        "&nbsp;&nbsp;&nbsp;星期" +
        week
      );
    },
  },
  destroyed() {
    clearInterval(this.timer);
    clearInterval(this.timer2);
  },
};
</script>

<style lang='scss'   scoped src='@/assets/styles/tsl.scss'>
// @import '~@/assets/styles/tsl.scss';
</style>